<template>
	<view class="cart-item">
		<up-checkbox @change="checkChange" :checked="goods.checked" inactiveColor="#000" activeColor="#000 "
			:customStyle="{marginRight: '20px'}"></up-checkbox>
		<image class="cart-img" mode="aspectFill" :src="goods.mainImage"></image>
		<view class="cart-goods-box">
			<u-text lines="1" color="#000" lineHeight="22" bold size="14" :text="goods.name"></u-text>
			<!-- <view class="u-m-t-30 u-m-b-30">
				<up-number-box disabledInput></up-number-box>
			</view> -->
			<u-text margin="12px 0" color="#666" size="12" :text="`x${goods.count}`"></u-text>
			<view class="u-flex u-flex-between u-flex-items-center">
				<u-text mode="price" color="#000" size="14" :text="goods.salePrice"></u-text>
				<u-text align="right" color="#ccc" size="12" text="移除" @click="removeGoods"></u-text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		PinaCartStore
	} from '@/store/cart.js'


	const emits = defineEmits([
		'checkChange'
	])

	const props = defineProps({
		goods: {
			type: Object,
			default: () => ({})
		},
		index: {
			type: Number,
			default: 0
		}
	})

	const checkChange = (e) => {
		emits('checkChange', {
			id: props.goods.id,
			checked: e
		})
	}
	//移除商品
	const removeGoods = () => {
		PinaCartStore().removeGoods(props.goods.id)
	}
</script>

<style scoped lang="scss">
	.cart-item {
		display: flex;
		align-items: center;
		background-color: #F8F8F8;
		padding: 20px;
		margin-bottom: 20px;

		.cart-img {
			width: 60px;
			height: 60px;
		}

		.cart-goods-box {
			flex: 1;
			margin-left: 20px;
		}
	}
</style>